<template>
    <div class="search">
        <!-- <h2>搜索页面</h2> -->

        <!-- 搜索栏 -->
        <van-search v-model="value" show-action placeholder="请输入搜索关键词" shape="round" @search="onSearch">
            <template #action>
                <div @click="onSearch" class="rig-search">搜索</div>
            </template>
        </van-search>

        <!-- 热门搜索 -->
        <div class="hot">
            <h2>热门搜索</h2>
            <ul>
                <li v-for="(item, index) in search" :key="item + index" @click="clicks(item)">{{ item }}</li>
            </ul>
        </div>
        <hr class="hr" />

        <!-- 关键字搜索内容 -->
        <article-view :article="keywory" v-if="keywory.length > 0"></article-view>

        <!-- 搜素图片 -->
        <div v-if="show" class="imgShow">
            <img v-if="clicksList.length < 1" src="../assets/image/noGood.png" alt="" />
            <img v-else :src="imgPic" alt="" />
        </div>
        <!-- 商品推荐 -->
        <recom-mended v-if="show"></recom-mended>
    </div>
</template>

<script>
import RecomMended from "../components/RecomMended.vue";
import ArticleView from "./ArticleView.vue";
export default {
    components: { RecomMended, ArticleView },
    data() {
        return {
            search: [],
            value: "", // 搜索内容
            clicksList: [],
            show: false,
            imgPic: "",
            keywory: [],
        };
    },
    methods: {
        async getSearch() {
            await this.axios.get("/search/keyword").then((re) => {
                this.search = re;
            });
        },
        // 热门搜索 关键字触发
        clicks(event) {
            this.keywory = [];
            this.show = false;
            console.log(event);
            this.axios.get(`/products?page=1&limit=20&keyword=${event}`).then((re) => {
                this.clicksList = re;
                this.show = true;
                if (this.clicksList.length < 1) {
                    return;
                } else {
                    this.imgPic = re;
                    return;
                }
            });
        },

        // 点击搜索,触发
        onSearch() {
            console.log(1231);
            // 关闭热门页面
            this.show = false;
            if (this.value == "" || this.value.length == 0) return;
            this.axios.get(`/products?page=1&limit=20&keyword=${this.value}`).then((re) => {
                if (re.length < 1) {
                    this.show = true;
                }
                this.keywory = re;
            });
        },
    },
    created() {
        this.getSearch();
        console.log(123);
    },
};
</script>
<style lang="scss" scoped>
.rig-search {
    margin-right: 5px;
    margin-left: 5px;
}
.hot {
    margin-top: 20px;
    h2 {
        font-size: 14px;
        color: gray;
        margin-left: 10px;
    }
    ul {
        display: flex;
        font-size: 14px;
        margin-left: 10px;
        margin-top: 13px;
        li {
            border: 1px solid grey;
            padding: 5px;
            margin-right: 10px;
            box-shadow: 0 0 1px 1px rgba(165, 163, 163, 0.3);
        }
    }
}
.hr {
    border: none;
    width: 95vw;
    height: 0.5px;
    margin-top: 25px;
    background: rgba(123, 122, 122, 0.1);
}

// 获取到的图片
.imgShow {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
        width: 207px;
        height: 168px;
    }
}
</style>
